import React, { Component } from 'react';
// 按需引入请求函数
import { getTab, getTabList } from './api'
import './App.css'
import Menuitem from './components/MenuItem';
class App1 extends Component {
  state = {
    tab: [],
    tabList: [],
    activeIndex: 2
  }
  // 请求数据并且保存state
  async getTabAndSet() {
    const resp = await getTab()
    const { data } = resp.data

    this.setState({
      tab: data
    })
  }

  async getTabListAndSet() {
    const resp = await getTabList()
    const { data } = resp.data

    this.setState({
      tabList: data
    })

    console.log(data);
  }
  render() {
    const { tab, tabList, activeIndex } = this.state
    return (
      <div className="app">
        <div className="menu-contianer">
          <div className="menu">
            {
              tab.length > 0 && tab.map(v => {
                return <Menuitem key={v.id} {...v}></Menuitem>
              })
            }
          </div>
        </div>

        <div className="tab">
          <div className="menu">
            {
              tabList.length > 0 && tabList.map((v,i) => {
                return (
                  <b key={v.id}
                    className={ i === activeIndex ? 'active' : '' }
                    onClick={ () => this.setState({ activeIndex: i }) }
                  >{ v.title }</b>
                )
              })
            }
          </div>
          <div className="content">
            {
              tabList.length > 0 && tabList[activeIndex].children.map(v => {
                return (
                  <dl key={v.id}>
                    <dt><img src={v.url} alt="" /></dt>
                    <dd>
                      <h3>{v.title}</h3>
                      <p>{v.desc}</p>
                    </dd>
                  </dl>
                )
              })
            }
          </div>
        </div>
      </div>
    );
  }
  componentDidMount() {
    // 发起请求
    this.getTabAndSet()
    this.getTabListAndSet()
  }
}

export default App1;
